<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我想卖</title>
    <script src="https://cn.vuejs.org/js/vue.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <script src="../static/layui/layui.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body style="background-color: rgba(0, 0, 0, 0.1)">
<div style="margin-top: 20px" id="want_sell">
    <span th:text="${session.user.getUser_id()}" hidden="hidden" id="user_id_span"></span>
    <div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">宝贝名字</label>
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="起个响亮的名字" autocomplete="off"
                       class="layui-input" v-model="goods_name">
            </div>
        </div>
        <br>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">宝贝价格</label>
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="您期待的价格" autocomplete="off"
                       class="layui-input" v-model="goods_price">
            </div>
        </div>
        <br>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">宝贝类型</label>
            <div class="layui-input-block" style="width: 186px;">
                <select name="city" lay-verify="required" style="margin-top: 8px" v-model="goods_type">
                    <option value="1">电器</option>
                    <option value="2">数码</option>
                    <option value="3">鞋服</option>
                    <option value="4">美妆</option>
                    <option value="5">食品</option>
                    <option value="6">运动</option>
                    <option value="7">图书</option>
                    <option value="8">其他</option>
                </select>
            </div>
        </div>
        <br>
        <div class=" layui-inline" style="margin-left: 40px">
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test1">上传图片</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="demo1" style="width: 100px;height: 100px">
                    <p id="demoText"></p>
                </div>
                <div style="width: 95px;">
                    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                        <div class="layui-progress-bar" lay-percent=""></div>
                    </div>
                </div>
            </div>

            <a name="list-progress"> </a>
        </div>
        <div style="margin-top: 10px;">

        </div>
        <div class="layui-form-item layui-form-text " style="width: 500px">
            <label class="layui-form-label">描述一下</label>
            <div class="layui-input-block">
                <textarea name="desc" placeholder="优秀的宝贝描述有助于宝贝离手哦~" class="layui-textarea" v-model="goods_describe"></textarea>
            </div>
        </div>
        <div class="layui-form-item layui-inline" style="margin-left: 40px">
            <div class="layui-inline">
                <button class="layui-btn" lay-submit lay-filter="formDemo" @click="ok()">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </div>
</div>
</body>
<script>

    layui.use(['upload', 'element', 'layer'], function () {
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;

        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: '/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                //如果上传失败
                if (res.code === 0) {
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                layer.msg('上传成功');
                console.log(res.goods_picture);
                app.goods_picture=res.goods_picture;
                $('#demoText').html(''); //置空上传失败的状态
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
            //进度条
            , progress: function (n, elem, e) {
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
    });

    var app=new Vue({
        el:"#want_sell",
        data:{
            goods_name:"",
            goods_price:"",
            goods_type:"",
            goods_describe: "",
            goods_picture:"",
            user_id:""
        },
        methods:{
            ok:function () {
                this.user_id=document.getElementById("user_id_span").innerText;
                alert("点击提交!");
                var params=new URLSearchParams();
                params.append('goods_name',this.goods_name);
                params.append('goods_describe',this.goods_describe);
                params.append('goods_type',this.goods_type);
                params.append('goods_price',this.goods_price);
                params.append('user_id',this.user_id);
                params.append('goods_picture',this.goods_picture);
                axios.post("/add_want_sell",params
                ).then(function (response) {
                    if(response.data===true){
                        layer.msg("发布成功");
                        //获取当前窗口的name,关闭当前弹出层刷新父页面
                        var index=parent.layer.getFrameIndex(window.name);
                        parent.location.reload();//刷新父页面，注意一定要在关闭当前iframe层之前执行刷新
                        parent.layer.close(index); //再执行关闭
                    }
                },function (err) {
                    console.log(err);
                })
            }
        }
    });
</script>
</html>